<template>
	<view class="app-book e-p-20">
		<view class="app-book__tab e-flex-xy-center">
			<view class="e-flex-1 e-flex-xy-center e-rela app-book__tab--box" @tap="handleTab(1)">
				<text class="c-666 e-font-30" :class="{'c-333 fw-600':activeIndex === 1}">申请提货</text>
				<view class="app-book__tab--line" v-if="activeIndex === 1">

				</view>
			</view>
			<view class="e-flex-1 e-flex-xy-center e-rela app-book__tab--box" @tap="handleTab(2)">

				<text class="c-666 e-font-30" :class="{'c-333 fw-600':activeIndex === 2}">提货记录</text>
				<view class="app-book__tab--line" v-if="activeIndex === 2">

				</view>
			</view>
		</view>
		<view class="app-book__line e-m-b-20">

		</view>
		<template v-if="activeIndex === 1">
			<view class="bg-white e-radius-20 e-p-20 e-m-b-20">
				<view class="e-flex-xy-center e-m-b-20">
					<image :src="$staticPath('black-cc.png')" mode="" class="img-200"></image>
					<view class="e-flex-1 e-p-l-20">
						<view class="c-333 e-font-28 w-500 e-m-b-50">
							捡漏提货手链
						</view>
						<view class="e-font-26" style="color: #808080;">
							可提{{info.deliveryPriceMax}}串
						</view>
					</view>
				</view>
				<view class="e-flex">
					<view class="e-flex-1 e-font-28 fw-600" style="color: #424242;">
						请选择提货数量
					</view>
					<view class="">
						<e-number-box v-model="form.num" :max="info.deliveryPriceMax" integer
							@change="handleChangeNum"></e-number-box>
					</view>
				</view>
			</view>
			<view class="bg-white e-radius-20 e-p-l-30 e-p-r-30 e-m-b-20">
				<view class="app-book__input e-flex-y-center">
					<text class="e-font-28 c-333 fw-600">账号</text>
					<view class="e-flex-end e-flex-1" @tap="showPicker = true">
						<text class="e-font-28" v-if="account && account.account">{{account.account}}</text>
						<text class="e-font-28" style="color: #CCCCCC;" v-else>请选择深文艺术账号</text>
						<image :src="$staticPath('grey-arrow.png')" mode="widthFix" class="img-36"></image>
					</view>
				</view>
				<view class="e-flex-end e-p-t-16 e-p-b-26">
					<view class="e-flex-y-center e-font-28" style="color: #4B68E3;" @tap="$goTo('/pages/book/account')">
						+添加账号
					</view>
				</view>
			</view>
			<view class="bg-white e-radius-20 e-p-l-30 e-p-r-30 c-333 e-font-28">
				<view class="app-book__input e-flex-y-center"
					v-if="info.deliveryRule&&info.deliveryRule.buyNumber && info.deliveryRule.giftNumber">
					<view class="e-flex-1 fw-600">
						买赠优惠
					</view>
					<text>买{{info.deliveryRule.buyNumber}}赠{{info.deliveryRule.giftNumber}}</text>
				</view>
				<view class="app-book__input e-flex-y-center">
					<view class="e-flex-1 fw-600">
						手续费率
					</view>
					<text>{{info.scale}}%</text>
				</view>
			</view>

			<view class="app-book__footer">
				<view class="e-p-20 e-flex-xy-center e-rela" @tap.stop="showAgreementPop = true">
					<view class="e-abso" style="width: 100rpx;height: 40rpx;z-index: 999;left: 25%;">

					</view>
					<radio style="transform:scale(0.8)" :checked="isAgree" :color="AppSkin.primary" />
					<text style="color: #808080;" class="e-font-26">勾选同意签署《兑换协议》</text>
				</view>
				<view class="e-p-l-40 e-p-r-40">
					<view class="app-book__footer--btn e-flex-xy-center" :style="{'opacity':isOk ? '1':'0.5'}"
						@tap="submit">
						<text class="e-font-32 c-white">确认提货</text>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" :show="isEmpty"></empty>
			<scroll-view class="scroll-view-box" v-if="!isEmpty">
				<view class=" e-m-b-20" v-for="item in list" :key="item.id">
					<record-vue :info="item"></record-vue>
				</view>
			</scroll-view>

		</template>
		<password-popup ref="passwordPopupRef" :show="passwordShow" @close="passwordShow = false"
			@confirm="passwordPay"></password-popup>

		<e-picker :cancelText="$t('common.取消')" :confirmText="$t('common.确认')" :show="showPicker" :columns="accountList"
			@cancel="showPicker = false" @confirm="handleSelect" keyName="account"></e-picker>

		<agreement-pop :showPop="showAgreementPop" @agree="isAgree = true" @cancel="isAgree = false" :isAgree="isAgree"
			agreeId="19" @close="showAgreementPop = false"></agreement-pop>
	</view>
</template>

<script setup>
	import {
		preDelivery,
		getSWlist,
		deliveryApply,
		applyList
	} from '@/common/request/api'
	import recordVue from './components/record.vue'
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useCurrentInstance,
		useQueryPage
	} from '@/common/hooks';
	import {
		useUser
	} from '@/common/stores';
	import { storeToRefs } from 'pinia'
	const userStore = useUser();
	const {
		userInfo,
		isLogin
	} = storeToRefs(userStore);
	const ctx = useCurrentInstance();
	const activeIndex = ref(1)
	const info = ref({})
	const isAgree = ref(false)
	const form = ref({
		num: 1,
		swAccountId: ''
	})
	const showPicker = ref(false)
	const accountList = ref([])
	const account = ref({})
	const passwordShow = ref(false)
	const showAgreementPop = ref(false)

	const isOk = computed(() => {
		return isAgree.value && form.value.swAccountId
	})

	const {
		showLoad,
		isEmpty,
		list,
		handleQueryPage,
		handleRefresh
	} = useQueryPage({
		api: applyList,
		pageSize: 20,
		option:{
			responseKey:'data.rows'
		}
	})


	onLoad((opt) => {
		if (opt.index && opt.index == 2) {
			activeIndex.value = Number(opt.index)
			handleRefresh({type:2})
		}
		getData()
	})
	onShow(() => {
		getSWlist({
			isPage: false,
			type:2
		}).then(res => {
			accountList.value = [res.rows]
		})
	})
	onReachBottom(() => {
		handleQueryPage({type:2})
	})


	const handleChangeNum = (v) => {
		info.value.currentDeliveryPrice = v.value
		info.value.getDeliveryPrice = v.value * info.value.deliveryRule.giftNumber
	}
	const handleSelect = (e) => {
		account.value = e.value[0]
		if (account.value) {
			form.value.swAccountId = account.value.id
		}

		showPicker.value = false
	}
	const handleTab = (type) => {
		activeIndex.value = type
		if (activeIndex.value === 1) {
			getData()
		} else {
			handleRefresh({type:2})
		}
	}
	const getData = () => {
		preDelivery({type:2}).then(res => {
			if (res.code == 200) {
				info.value = res.data
				form.value.num = info.value.minNumber
				handleChangeNum({
					value: info.value.minNumber
				})
			}
		})
	}

	const submit = () => {
		if (!isOk.value) return
		if (userInfo.value.isAuth !== 2) {
			uni.showModal({
				title: '您还未实名认证，无法提货',
				confirmText: '去实名',
				cancelColor: '#333333',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/public/realName/index?pageTitle=实名认证',
						})
					}
				}
			})
			return
		}
		if (userInfo.value.isPayword) {
			passwordShow.value = true
		} else {
			ctx.$goTo('/pages/public/setting/pay-pwd', {
				type: 1
			})
		}
	}
	const passwordPopupRef = ref();
	const passwordPay = (password) => {
		passwordPopupRef.value?.reset();
		passwordShow.value = false
		const params = {
			...form.value,
			payPassword: password,
			type:2
		}
		deliveryApply(params).then(res => {
			if (res.code == 200) {
				ctx.$goTo('/pages/book/success',{type:2})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.img-200 {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.scroll-view-box {
		height: calc(100vh - 155rpx);
	}

	@include appBem_b(book) {
		background: #F8F8F8;
		padding-bottom: 172rpx;

		@include appBem_e(tab) {
			width: 100vw;
			height: 94rpx;

			@include appBem_m(box) {
				height: 94rpx;
			}

			@include appBem_m(line) {
				width: 70rpx;
				height: 6rpx;
				background: #4B68E3;
				border-radius: 34rpx;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		@include appBem_e(line) {
			height: 1rpx;
			background: #EFEFEF;
			border-radius: 34px;
		}

		@include appBem_e(input) {
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: inset 0px -1rpx 0px 0px #EDEFF3;
		}

		@include appBem_e(footer) {
			width: 100vw;
			height: 172rpx;
			background: #FFFFFF;
			box-shadow: inset 0px 1rpx 0px 0px #F2F2F2;
			position: fixed;
			bottom: 0;
			left: 0;

			@include appBem_m(btn) {
				height: 80rpx;
				background: #4B68E3;
				border-radius: 40rpx;
			}
		}
	}

	.e-flex-end {
		display: flex;
		align-items: flex-end;
	}
</style>